<template>
  <div class="row Rd-formDefault Rd-orderBill">
    <div class="container">
      <div class="Rd-cont">
        <div>
          <input type="text" name="collegeCode" id="collegeCode" value="" data-rule-required="true" data-msg-required="参数异常，请重新选择学校！" data-rule-rangelength="[2, 20]" data-msg-rangelength="参数异常，请重新选择学校！" hidden>
        </div>
        <div class="hold10"></div>
        <h2><i class="et_iconfont">&#xe60c;</i>&nbsp;付款信息</h2>
        <hr>
        <div class="hold20"></div>
        <!--              收款方名称-->
        <div class="row" >
          <div class="col-sm-6">
            <div class="form-group">
              <label>收款方名称</label>
              <p class="textItem">{{receiveName.receive_en}}
                <br>{{receiveName.receive_zh}}</p>
            </div>
          </div>
          <div class="hold30"></div>
        </div>
        <!--              到账金额-->
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="cost">到账金额<small>（<var class="cur">美元</var>）</small></label>
              <input type="text" class="form-control" name="cost" id="cost" placeholder="0.00" v-validate="'required|matchMoney|matchMoneyMin:'+ ' '+ MoneyMin + ' '+ currency+'|matchMoneyMax:'+ ' '+ MoneyMax + ' '+ currency" data-vv-as="到账金额" data-rule-required="true" data-msg-required="请填写金额" data-rule-matchMoney="true" data-msg-matchMoney="请填写合理金额" data-rule-matchMoneyMin="100" data-msg-matchMoneyMin="单笔最小金额 {0} <var class='cur'>美元</var>" data-rule-matchMoneyMax="200000" data-msg-matchMoneyMax="单笔最大金额 {0} <var class='cur'>美元</var>">
              <input type="hidden" id="Capital_amount">
              <p class="form_error_info text-danger bg-danger" v-cloak>{{errors.first('cost')}}</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="textDescriptionTop hidden-xs"></div>
            <p class="textDescription"><i class="et_iconfont hidden-xs">&#xe605;</i><i class="et_iconfont visible-xs-inline">&#xe607;</i>&nbsp;学校账单要求支付的金额</p>
          </div>
          <div class="hold30"></div>
        </div>
        <!--              足额到账服务-->
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>足额到账服务<small>（中间银行收取）</small></label>
              <p class="Rd-bankExtraCost">
                <button type="button" class="btn btn-primary-outline icon" :class="[bankSelectIndex == 0 ? 'active': '']" @click="handleUserService($event,0)"  data-val="25"><i class="et_iconfont"></i><span>使用服务 (+<var class="curExtra">25</var><var class="cur">美元</var>)</span></button>&nbsp;
                <button type="button" class="btn btn-primary-outline icon" :class="[bankSelectIndex == 1 ? 'active': '']" @click="handleUserService($event,1)"  data-val="0"><i class="et_iconfont"></i><span>不使用服务</span></button>
              </p>
              <span class="help-block"><i class="et_iconfont">&#xe629;</i>&nbsp;该费用不包含入账费，到账后是否会扣除入账费请仔细查看账单说明</span>
              <div>
                <input type="text" name="bankExtraCost" v-model="bankExtraCost" id="bankExtraCost" data-rule-required="true" data-msg-required="请确定是否使用该服务" data-rule-digits="true" data-msg-digits="参数异常" value="0" hidden>
              </div>
              <p class="text-primary Rd-bankExtraCost-info1"  v-show='bankSelectIndex == 0'>选择该服务，系统会自动追加结算<small>（<b> 无需自己手动添加</b> 这部分金额到 <b>付款金额</b> 中 ）</small>。</p>
              <p class="text-danger Rd-bankExtraCost-info0"   v-show='bankSelectIndex == 1'>交学费请务必选择使用足额到账服务。如果学费未能足额到账，学校将视为<b>未缴清学费</b>，逾期会<b>影响学生选课</b>，还会罚款。银行的国际电汇同样也会扣除该费用。</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="textDescriptionTop hidden-xs"></div>
            <p class="textDescription"><i class="et_iconfont hidden-xs">&#xe605;</i><i class="et_iconfont visible-xs-inline">&#xe607;</i>&nbsp;足额到账费是资金在跨境转款时由中间银行收取的手续费。资金周转过程中，中间行会直接从您的转款金额里面自动扣除。例如您需要转款 $10,000 实际到达账户的金额是 $9,975 左右，在银行柜台电汇也是会有这个费用的。因此如果您希望足额到账，请附加支付这部分费用。也欢迎您到任何一家可以做外汇业务的银行核实该项费用的真实性。</p>
          </div>
          <div class="hold30"></div>
        </div>
        <!--              学校额外费用-->
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>学校附加费<small>（学校收取）</small></label>
              <p class="Rd-schoolExtraCost">
                <button type="button" class="btn btn-primary-outline icon" :class="[schoolSelectIndex == 0 ? 'active': '']" @click="handleExtraCost($event,0)"  data-val="15"><i class="et_iconfont"></i><span>附加费用 (+15美元)</span></button>&nbsp;
                <button type="button" class="btn btn-primary-outline icon" :class="[schoolSelectIndex == 1 ? 'active': '']" @click="handleExtraCost($event,1)"  data-val="0"><i class="et_iconfont"></i><span>不用附加</span></button>
              </p>
              <div>
                <input type="text" name="schoolExtraCost" v-model="schoolExtraCost" id="schoolExtraCost" data-rule-required="true" data-msg-required="请确定是否附加该费用" data-rule-digits="true" data-msg-digits="参数异常" value="0" hidden>
              </div>
              <p class="text-primary Rd-schoolExtraCost-info" v-show='schoolSelectIndex == 0'>选择附加该费用，系统会自动追加结算<small>（<b> 无需自己手动添加</b> 这部分金额到 <b>付款金额</b> 中 ）</small>。</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="textDescriptionTop hidden-xs"></div>
            <p class="textDescription"><i class="et_iconfont hidden-xs">&#xe605;</i><i class="et_iconfont visible-xs-inline">&#xe607;</i>&nbsp;[ 特别资讯 ] 我们注意到该学校大部分账单要求每笔多支付 $15。请各位仔细查看学校发送的账单等缴费资讯，并以学校实际公布的信息为准。</p>
          </div>
          <div class="hold30"></div>
        </div>
        <!--              付款用途-->
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>付款用途<small>（可多选）</small></label>
              <div class="list-group checkbox Rd-feeType">
                <a href="javascript:;" class="list-group-item lItem col-md-6" v-for="(item, index) of feeTypeList" :key="item.en" ref="itemFeeType"  @click="handleClickFeeType(item,index)"><i class="et_iconfont icon"></i><span>{{item.ch}}&nbsp;<small>{{item.en}}</small></span></a>
                <!-- <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>学费&nbsp;<small>Tuition</small></span></a>
                <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>押金/占位费&nbsp;<small>Deposit</small></span></a>
                <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>申请费&nbsp;<small>Application Fee</small></span></a>
                <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>住宿费&nbsp;<small>Housing</small></span></a>
                <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>保险&nbsp;<small>Insurance</small></span></a>
                <a href="javascript:;" class="list-group-item lItem col-md-6"><i class="et_iconfont icon"></i><span>饭费&nbsp;<small>Meal Plan</small></span></a>
                <a href="javascript:;" class="list-group-item temp col-md-6"><i class="et_iconfont icon"></i><span></span><button type="button" class="delItem"><i class="et_iconfont">&#xe610;</i></button></a> -->
                <a href="javascript:;" v-if="addItemList.length" v-for="(item, index) of addItemList" :key="index" ref="itemList" @click="handleAddItemList(item,index)" class="list-group-item col-md-6 lItem active">
                  <i class="et_iconfont icon"></i><span>{{item}}<small class="hidden">{{item}}</small></span>
                  <button type="button" class="delItem" @click.stop="handleDelItem(item, index)"><i class="et_iconfont"></i></button>
                </a>
                <div class="list-group-item new col-sm-12" v-if="addFeeType">
                  <div class="Rd-itemText">
                    <input type="text" v-model.trim="addItemText" placeholder="[中文] 、[英文] 或 [中英文]" id="addItemText">
                  </div>
                  <a href="javascript:;" id="disAddItem" @click="disAddItem"><i class="et_iconfont">&#xe610;</i></a><a href="javascript:;" id="addItem" @click="addItem"><i class="et_iconfont">&#xe649;</i></a>
                </div>
                <a href="javascript:;" class="list-group-item add col-sm-12" v-else @click="handleAddOtherFeeType"><i class="et_iconfont icon">&#xe662;</i><span>点击添加其它</span></a>
              </div>
              <div class="clearfix"></div>
              <div>
                <input type="text" name="feeType" id="feeType" v-model="feeType" data-rule-required="true" data-msg-required="请选择缴费用途" data-rule-maxlength="80" data-msg-maxlength="缴费用途项目内容过多" hidden>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="textDescriptionTop hidden-xs"></div>
            <p class="textDescription"><i class="et_iconfont hidden-xs">&#xe605;</i><i class="et_iconfont visible-xs-inline">&#xe607;</i>&nbsp;可多选，用于与学校核对款项涵盖的财务项目</p>
          </div>
          <div class="hold30"></div>
        </div>
        <!--              Payment Reference-->
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="cost">Payment Reference</label>
              <input type="text" class="form-control" name="cost" id="feeType" placeholder="" data-rule-required="true" data-msg-required="请填写Payment Reference">
            </div>
          </div>
          <div class="col-sm-6">
            <div class="textDescriptionTop hidden-xs"></div>
            <p class="textDescription"><i class="et_iconfont hidden-xs">&#xe605;</i><i class="et_iconfont visible-xs-inline">&#xe607;</i>&nbsp;<a data-toggle="modal" data-target=".modal-reference"><ins>存在疑问？</ins></a></p>
          </div>
          <div class="hold30"></div>
        </div>
      </div>
    </div>
    <div class="row hold50 Rd-holdWhite"></div>
  </div>
</template>

<script>
export default {
  name: "OrderBill",
  props:{
    receiveName: Object
  },
  data () {
    return {
      feeTypeList: [
        {ch:'学费', en:'Tuition'},
        {ch:'押金/占位费', en:'Deposit'},
        {ch:'申请费', en:'Application Fee'},
        {ch:'住宿费', en:'Housing'},
        {ch:'保险', en:'Insurance'},
        {ch:'饭费', en:'Meal Plan'}
      ],
      FeeTypeArray: [],
      addItemList: [],
      addItemValue: [],
      bankSelectIndex: '-1',
      bankExtraCost: '',
      schoolSelectIndex: '-1',
      schoolExtraCost: '',
      addFeeType: false,
      addItemText: '',
      MoneyMin:'100',
      MoneyMax:'200000',
      currency:'美元'
    }
  },
  computed: {
    feeType () {
      let array = this.FeeTypeArray.concat(this.addItemValue)
      return array.join(';')
    }
  },
  methods: {
    handleUserService (el,index) {
      if (this.bankSelectIndex != index) {
          let dataVal = el.currentTarget.getAttribute('data-val')
          this.bankSelectIndex = index
          this.bankExtraCost = dataVal
          this.$store.commit('chooseBankExtraCost', dataVal)
      }
    },
    handleExtraCost (el,index) {
      if (this.schoolSelectIndex != index) {
          let dataVal = el.currentTarget.getAttribute('data-val')
          this.schoolSelectIndex = index
          this.schoolExtraCost = dataVal
      }
    },
    handleClickFeeType (item,index) {
      if(this.FeeTypeArray.indexOf(item.en) > -1){
        let inx = this.FeeTypeArray.indexOf(item.en)
        this.FeeTypeArray.splice(inx,1)
      }else{
         this.FeeTypeArray.push(this.feeTypeList[index].en)
      }

      if(this.$refs.itemFeeType[index].classList.contains('active')){
        this.$refs.itemFeeType[index].classList.remove('active')
      }else{
          this.$refs.itemFeeType[index].classList.add('active')
      }
    },
    handleAddOtherFeeType () {
      this.addFeeType = true
    },
    disAddItem () {
      this.addFeeType = false
    },
    addItem () {
      if (this.addItemText && this.addItemList.indexOf(this.addItemText) < 0) {
        this.addItemList.push(this.addItemText)
        this.addItemValue.push(this.addItemText)
        this.addItemText = ''
        this.addFeeType = false
      }
    },
    handleDelItem (item,index) {
      if (this.addItemValue.indexOf(item) > -1) {
        let inx = this.addItemValue.indexOf(item)
        this.addItemValue.splice(inx, 1)
      }
      this.addItemList.splice(index, 1)   
    },
    handleAddItemList (item, index) {
      if (this.addItemValue.indexOf(item) > -1) {
        let inx = this.addItemValue.indexOf(item)
        this.addItemValue.splice(inx, 1)
      }else{
        this.addItemValue.push(item)  
      }

      if(this.$refs.itemList[index].classList.contains('active')){
        this.$refs.itemList[index].classList.remove('active')
      }else{
          this.$refs.itemList[index].classList.add('active')   
      }
    }
  }
}
</script>

<style>
</style>